<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="/element-ui/index.css">
    <style>
        body {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 查询条件 -->
        <div class="search-box">
            <el-form :inline="true" :model="searchForm" label-width="100px" label-position="right">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="所有者">
                            <el-input v-model="searchForm.owner"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="表名">
                            <el-input v-model="searchForm.tableName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="列名">
                            <el-input v-model="searchForm.columnName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="注释">
                            <el-input v-model="searchForm.comments"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-row type="flex" justify="end">
                        <el-col :span="8">
                            <el-form-item>
                                <el-button @click="search">查询</el-button>
                                <el-button @click="resetSearch">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
            </el-form>
        </div>
        <!-- 动态生成表格列 -->
        <el-table :data="paginatedData" style="width: 100%">
            <el-table-column
                v-for="column in tableColumns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label">
            </el-table-column>
        </el-table>
        <!-- 完整的分页组件 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredData.length"
            background
        >
        </el-pagination>
    </div>
    <!-- 引入 Vue 和 Element UI 的 JS 文件 -->
    <script src="/element-ui/Vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    // 原始数据
                    originalData: [],
                    searchForm: {
                        owner: '',
                        tableName: '',
                        columnName: '',
                        comments: ''
                    },
                    currentPage: 1,
                    pageSize: 100,
                    filteredData: [],
                    paginatedData: [],
                    tableColumns: [] // 存储表格列信息
                };
            },
            mounted() {
                this.fetchColumns();
                this.search();
            },
            methods: {
                // 获取表格列信息，修改接口地址以对应 all_objects 表
                fetchColumns() {
                    // 这里需要替换为实际的后端接口地址，用于获取 all_objects 表的列名
                    fetch('/api/getAllObjectsColumns') 
                       .then(response => response.json())
                       .then(data => {
                            this.tableColumns = data.map(column => ({
                                prop: column,
                                label: column
                            }));
                        });
                },
                search() {
                    // 这里需要替换为实际的后端接口地址，用于获取 all_objects 表的数据
                    fetch('/api/getAllObjectsData', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.searchForm)
                    })
                       .then(response => response.json())
                       .then(data => {
                            this.originalData = data;
                            // 过滤数据
                            this.filteredData = this.originalData.filter(item => {
                                return (
                                    item.OWNER && item.OWNER.toLowerCase().includes(this.searchForm.owner.toLowerCase()) &&
                                    item.TABLE_NAME && item.TABLE_NAME.toLowerCase().includes(this.searchForm.tableName.toLowerCase()) &&
                                    item.COLUMN_NAME && item.COLUMN_NAME.toLowerCase().includes(this.searchForm.columnName.toLowerCase()) &&
                                    item.COMMENTS && item.COMMENTS.toLowerCase().includes(this.searchForm.comments.toLowerCase())
                                );
                            });
                            this.currentPage = 1;
                            this.handleCurrentChange(1);
                        });
                },
                handleCurrentChange(page) {
                    this.currentPage = page;
                    const start = (page - 1) * this.pageSize;
                    const end = start + this.pageSize;
                    this.paginatedData = this.filteredData.slice(start, end);
                },
                handleSizeChange(size) {
                    this.pageSize = size;
                    this.handleCurrentChange(this.currentPage);
                },
                // 添加重置方法
                resetSearch() {
                    this.searchForm = {
                        owner: '',
                        tableName: '',
                        columnName: '',
                        comments: ''
                    };
                    this.search();
                }
            }
        });
    </script>
</body>

</html>